<template>
  <view>
    <view class="bg">
      <image
        v-if="couponUserInfo.status != 2"
        src="../../static/public/img/coupon-bg.png"
        mode="widthFix"
      />
      <image
        v-else
        src="../../static/public/img/coupon-bg-gq.png"
        mode="widthFix"
      />
      <view class="info">
        <view class="left" :class="couponUserInfo.status != 0 ? 'gray' : ''">
          <view class="content">
            <view v-if="couponUserInfo.type == 1">
              <text class="f24 mr8">￥ </text
              ><text class="price">{{ couponUserInfo.reduceAmount }}</text>
            </view>
            <view class="count" v-else>
              <text class="f60"> {{ couponUserInfo.discount }}</text>
              <text class="f24 ml8">折</text>
            </view>
          </view>
          <view class="f26">满{{ couponUserInfo.premiseAmount }}元可用</view>
        </view>
        <view class="right">
          <view class="top">
            <view class="t-l">
              <view
                class="name mb15"
                :class="couponUserInfo.status != 0 ? 'gray' : ''"
                >{{ couponUserInfo.name }}</view
              >
              <view class="tip">{{
                couponUserInfo.suitType == "1"
                  ? "全部商品可用"
                  : couponUserInfo.suitType == "2"
                  ? "指定商品可用"
                  : couponUserInfo.suitType == "3"
                  ? "指定商品不可用"
                  : ""
              }}</view>
            </view>
            <view v-if="isOrder">
              <view
                v-if="couponUserInfo.status == 0"
                class="t-r"
                @tap="
                  $goUrl(
                    '/pages/goods/goods-list/index?couponUserId=' +
                      couponUserInfo.id
                  )
                "
              >
                <text>去使用</text>
              </view>
              <view class="t-r-gray" v-if="couponUserInfo.status == 1">
                <text>已使用</text>
              </view>
              <view class="t-r-gray" v-if="couponUserInfo.status == 2">
                <text>已过期</text>
              </view>
            </view>
          </view>

          <view class="bottom mt30">
            {{ couponUserInfo.validEndTime }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
const app = getApp();

export default {
  data() {
    return {
      CustomBar: this.CustomBar,
      theme: app.globalData.theme, //全局颜色变量
    };
  },

  components: {},
  props: {
    couponUserInfo: {
      type: Object,
      default: () => ({}),
    },
    toUse: {
      type: Boolean,
      default: true,
    },
    isOrder: {
      type: Boolean,
      default: true,
    },
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.gray {
  color: #00000070 !important;
  font-weight: normal !important;
}
.bg {
  position: relative;
  image {
    width: 100%;
  }
  .info {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: 20rpx 42rpx;
    .left {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #fff;
      margin-right: 25%;
      .content {
        margin-bottom: 12rpx;
        .price {
          font-size: 60rpx;
        }
      }
    }
    .right {
      flex: 1;
      .top {
        display: flex;
        align-content: center;
        justify-content: space-between;
        .t-l {
          .name {
            font-size: 32rpx;
            font-weight: 600;
            color: #000000;
          }
          .tip {
            font-size: 28rpx;
            color: #00000080;
          }
        }
        .t-r-gray {
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 60rpx;
          width: 128rpx;
          height: 60rpx;
          box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(228, 231, 237, 0.45);
          opacity: 0.25;
          border: 2rpx solid #000000;
        }
        .t-r {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 128rpx;
          height: 60rpx;
          background: linear-gradient(318deg, #f5894e 0%, #f69a68 100%);
          box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(245, 137, 78, 0.45),
            0rpx 4rpx 8rpx 0rpx rgba(245, 137, 78, 0.45);
          border-radius: 60rpx;
          color: #fff;
        }
      }
    }
    .bottom {
      font-size: 24rpx;
      color: #00000070;
    }
  }
}
</style>
